<template>
  <div id="app">
    <div class="shopcar" v-show="ShopcarShow">
      <div class="shopbox">
        <div class="shop-delect">
          <el-button
            type="danger"
            icon="el-icon-close"
            circle
            @click="closeshop"
          ></el-button>
        </div>
        <div class="shop-top">
          <h2>购物车</h2>
        </div>
        <hr />
        <div class="shop-btn">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click.native="shopdelect"
          ></el-button>
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            v-show="shopcart.length"
            >全选</el-checkbox
          >
        </div>
        <div class="shop-goods">
          <div class="shop-bottom" v-for="(el, idx) in shopCart" :key="idx">
            <div class="shop-btm-l">
              <img :src="el.s_good.s_goods_photos[0].path" alt="" />
            </div>
            <div class="shop-btm-name">
              {{ el.s_good.name }}
            </div>
            <div class="shop-btm-price">￥{{ el.s_good.price * el.num }}</div>
            <div class="shop-btm-num">
              <el-input-number
                v-model="el.num"
                controls-position="right"
                :min="1"
                :max="el.s_good.stock_num"
                @change="updateshopcar(el.id, el.num)"
              ></el-input-number>
            </div>
            <div class="shop-btm-r">
              <el-checkbox-group
                v-model="checkId"
                @change="handleCheckedCitiesChange"
              >
                <el-checkbox :label="el.id"></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <div class="shop-allprice">
          <div>总金额:{{ shopCartprice }}</div>
          <el-button
            type="text"
            @click="(dialogFormVisible = true), (ShopcarShow = false)"
            :disabled="!checkId.length"
            >提交订单</el-button
          >
        </div>
      </div>
    </div>
    <div id="nav">
      <div class="nav-top">
        <ul class="nav-top-left">
          <li><router-link to="/">首页</router-link></li>
        </ul>
        <ul class="nav-top-right">
          <li><router-link to="/form">个人订单</router-link></li>
          <li @click="onpenshop">购物车</li>
          <li><router-link to="/login">请登录</router-link></li>
        </ul>
      </div>
      <div class="nav-bottom">
        <ul class="nav-bottom-top">
          <li
            v-for="(el, idx) in navs"
            :key="idx"
            @mouseenter="nav_open(idx)"
            @mouseout="nav_stop()"
            :style="color"
          >
            {{ el.name }}
          </li>
        </ul>
        <div class="nav-bottom-bg" v-show="showdown"></div>
        <div class="nav-bottom-btm" v-show="showdown">
          <ul
            @mouseenter="nav_up"
            @mouseleave="nav_down"
            v-if="products.length"
          >
            <li v-for="(el, idx) in products" :key="idx">
              <router-link :to="{ path: '/detail/' + el.id }">
                <img :src="el.s_goods_photos[0].path" alt="" />{{ el.name }}
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="content">
      <router-view />
    </div>
    <div class="footer">
      <div class="footer-top">
        <ul>
          <li class="contacted">联系我们</li>
          <li>
            <p><i class="el-icon-service"></i>在线客服</p>
            <p class="remarks">(仅支持中文)</p>
          </li>
          <li>
            <p>
              <span><i class="el-icon-phone-outline"></i>000-0000-0000</span>
            </p>
            <p class="remarks">(仅支持中文)</p>
          </li>
          <li>
            <p>
              <span>email@addddd.com</span>
            </p>
            <p class="remarks">(建议及投诉受理邮箱)</p>
          </li>
          <li>
            <p>
              <span><i class="el-icon-timer"></i>9:00-22:00</span>
            </p>
          </li>
          <li class="order-tracking">订单追踪</li>
        </ul>
      </div>
      <div class="footer-bottom">备案号</div>
    </div>
    <!-- 地址 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="省份城市地区" :label-width="formLabelWidth">
          <el-cascader
            placeholder="省份城市地区"
            v-model="form.areaarr"
            ref="area_name"
            :options="city"
            @change="change"
            :label="form.area_name"
            filterable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth">
          <el-input v-model="form.desc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!-- 已有地址 -->
      <el-dialog
        width="50%"
        title="个人地址"
        :visible.sync="innerVisible"
        append-to-body
      >
        <el-radio-group v-model="radio">
          <div  v-for="(el, idx) in address" :key="idx">
          <el-radio-button :label="el.id"
            >  <h2>{{ el.name }}</h2> {{ el.area_name }} <br> {{ el.desc }}</el-radio-button
          >
        
          </div>
        </el-radio-group>
        <div class="dialog-btn">

        <el-button type="primary" @click="selectAddress">确定</el-button>
        <el-button type="danger" @click="delectAddress">删除</el-button>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changemyAddress" :disabled="!form.id">修改</el-button>
        <el-button type="primary" @click="myAddress">个人地址</el-button>
        <el-button type="primary" @click="submitaddress">保存地址</el-button>
        <el-button type="primary" @click="submitorder" :disabled="!form.id"
          >提交订单</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>


<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  font-weight: bold;
  color: #8a8f99;
  text-decoration: none;
}
a:hover {
  color: white;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // background-color: #f4f4f4;
}
#nav {
  width: 100%;
  z-index: 10000;
}
.nav-top {
  padding: 10px 60px;
  display: flex;
  justify-content: space-between;
  background-color: rgba($color: #000000, $alpha: 1);
  font-size: 14px;
  color: #8a8f99;
  font-weight: bold;
}
.nav-top-right,
.nav-top-left {
  display: flex;
  list-style: none;
}
.nav-top-right li,
.nav-top-left li {
  margin-left: 10px;
  cursor: pointer;
}
.nav-top-right li:hover,
.nav-top-left li:hover {
  color: white;
}
.nav-bottom .nav-bottom-top {
  // border: 1px solid black;
  position: absolute;
  list-style: none;
  display: flex;
  width: 100%;
  z-index: 2000;
  background-color: rgba($color: #ffffff, $alpha: 0);
  justify-content: center;
  li {
    padding-left: 80px;
    padding-right: 80px;
    line-height: 80px;
    font-weight: bold;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    &:hover {
      color: rgb(202, 199, 199);
    }
  }
}
.nav-bottom-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.2);
}
.nav-bottom-btm {
  position: absolute;
  width: 100%;
  z-index: 1000;
  a {
    color: black;
  }
}
.nav-bottom-btm ul {
  margin-bottom: 80px;
  list-style: none;
  display: flex;
  background-color: white;
  // border:1px solid black;
  padding: 10px;
  padding-top: 130px;
  padding-bottom: 60px;
  justify-content: center;
  li {
    width: 200px;
    height: 200px;
    margin-right: 50px;
    text-align: center;
    &:hover {
      transform: scale(1.1);
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.shopcar {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 3000;
  background-color: rgba(0, 0, 0, 0.2);
  .shopbox {
    padding: 30px;
    width: 800px;
    height: 800px;
    z-index: 2000;
    border-radius: 10px;
    margin: 20px auto;
    background-color: white;
    position: relative;
    .el-checkbox__inner::after {
      left: 7px !important;
      top: 3px !important;
      transform: rotate(42deg) scaleY(2) !important;
    }

    .shop-delect {
      position: absolute;
      top: -2%;
      left: 97%;
    }
    .shop-top {
      display: flex;
      justify-content: space-between;
    }
    .shop-btn {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .el-checkbox__inner {
        width: 20px !important;
        height: 20px !important;
      }
      .el-checkbox__label {
        font-size: 16px !important;
      }
      .el-button.is-circle {
        padding: 8px !important;
        font-size: 16px !important;
      }
    }
    .shop-goods {
      padding: 5px;
      height: 600px;
      overflow-y: auto;
    }
    .shop-bottom {
      margin-bottom: 20px;
      border: 1px solid rgb(224, 224, 224);
      box-shadow: 2px 5px 5px #888888;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      padding: 10px 20px;
      align-items: center;
      .el-checkbox__label {
        display: none;
      }
      .shop-btm-l {
        // display:inline-block;
        width: 100px;
        height: 100px;
        // border: 1px solid black;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .shop-btm-name,
      .shop-btm-num {
        // line-height: 100px;
        height: 30px;
        .el-input-number {
          width: 120px !important;
        }
      }
      .shop-btm-name {
        // display: flex;
        text-align: center;
        width: 160px;
      }
      .shop-btm-r {
        line-height: 100px;
        .el-checkbox__inner {
          width: 20px !important;
          height: 20px !important;
        }
      }
    }
    .shop-allprice {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
// .el-dialog__wrapper{
//   z-index: 3000 !important;
// }
.content {
  height: 100%;
}
.footer {
  width: 100%;
  position: absolute;
}
.footer-top {
  padding: 50px;
  background-color: #2c3e50;
  color: white;
  ul {
    display: flex;
    list-style: none;
    justify-content: space-between;
  }
}
.footer-bottom {
  padding: 10px;
  font-size: 14px;
  text-align: center;
  // background-color: wheat;
}
.el-dialog__wrapper{
  .el-form{
    margin: 0 auto !important;
    width: 60% !important;
  }
  .el-dialog{
    .el-dialog__body{
      .el-radio-group{
        display:flex;
        justify-content: space-around;
      }
      .dialog-btn{
        margin-top: 20px;
      }
    }
  }
    .el-input{
      width: 300px !important;
    }
    .el-cascader{
      .el-input{
        width: 100% !important;
      }
    }
  }
</style>
<script>
import serve from "./util/request";
// import axios from 'axios'
import { mapState } from "vuex";
import { SET__LOCAL_ITEM, GET_LOCAL_ITEM } from "./util/utils";
export default {
  data() {
    return {
      navs: [],
      products: [],
      productsClass: [],
      showdown: false,
      admintoken: "",
      color: "",
      colorOpen: true,
      // checked: false,
      ShopcarShow: false,
      shopcart: [],

      checkAll: false,
      isIndeterminate: true,
      checkId: [],

      //订单弹框
      dialogFormVisible: false,
      innerVisible: false,
      form: {
        areaarr: [],
        name: "",
        phone: "",
        area: "",
        area_name: "",
        desc: "",
        id: "",
      },
      formLabelWidth: "120px",
      //订单
      order: {
        goods_info: [],
        addr_id: "",
        shoppingCartIds: [],
      },
      //地址
      radio: "",
    };
  },
  methods: {
    async nav_open(idx) {
      await this.$store.dispatch("goods", {
        params: {
          page: 1,
          limit: 5,
          classify_id: this.navs[idx].id,
        },
      });
      this.products = this.$store.state.products.rows;
      // console.log(1);
      console.log(this.products);
      this.showdown = true;
    },
    nav_stop() {
      this.showdown = false;
    },
    nav_up() {
      this.showdown = true;
    },
    nav_down() {
      this.showdown = false;
    },
    async onpenshop() {
      await this.$store.dispatch("shoppingCart", { project_id: 9 });
      this.shopcart = this.$store.state.shopcart;
      // console.log(this.shopcart);
      // this.checkId =this.$store.state.shopcart.map(el=>el.id)
      console.log();
      this.ShopcarShow = true;
    },
    closeshop() {
      this.ShopcarShow = false;
    },
    async shopdelect() {
      await this.$store.dispatch("deleteshoppingCart", this.checkId);
      this.checkId = [];
    },
    handleCheckAllChange(val) {
      this.checkId = val
        ? (this.checkId = this.$store.state.shopcart.map((el) => el.id))
        : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.shopcart.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.shopcart.length;
    },
    async updateshopcar(id, num) {
      console.log(id, num);
      await this.$store.dispatch("updateshoppingCart", { id, num });
    },
    change(change) {
      {
        // let arr=[]
        // change.forEach(el=>{
        //     arr.push(this.city.filter(item=>item.id==el))
        // })
        this.$nextTick(() => {
          // console.log(this.$refs.box.innerText);
          console.log(
            change.join(","),
            this.$refs["area_name"].presentText.split(" / ").join("")
          );
          this.form.area_name = this.$refs["area_name"].presentText
            .split(" / ")
            .join("");
          this.form.area = change.join(",");
        });
      }
    },
    async submitaddress() {
      await this.$store.dispatch("addAddress", {
        name: this.form.name,
        phone: this.form.phone,
        area: this.form.area,
        area_name: this.form.area_name,
        desc: this.form.desc,
      });
    },
    async myAddress() {
      this.innerVisible = true;
      await this.$store.dispatch("address");
    },
    async selectAddress() {
      let arr = [];
      this.innerVisible = false;
      this.form = this.address.filter((el) => el.id == this.radio)[0];
      arr = this.form.area.split(",");
      this.form.areaarr = arr.map((el) => +el);
      console.log("选择", this.form.areaarr);
    },
    async submitorder() {
      // console.log(1);
      // let  goods_info={}
      this.checkId.forEach((el) => {
        this.order.goods_info.push({
          id: this.shopCart.filter((item) => item.id == el)[0].goods_id,
          num: this.shopCart.filter((item) => item.id == el)[0].num,
        });
        this.order.shoppingCartIds.push(
          this.shopCart.filter((item) => item.id == el)[0].id
        );
        // console.log(el,this.shopCart.filter(item=>item.id==el));
      });
      this.order.addr_id = this.form.id;
      await this.$store.dispatch("addOrder", this.order);
      this.dialogFormVisible = false;
      this.$router.push("/form");
    },
    delectAddress(){
      this.$store.dispatch('deleteaddress',this.radio)
    },
    changemyAddress(){
      console.log(1);
      this.$store.dispatch('changeaddress',this.form).then(()=>{
        alert('修改成功')
      })
    }
  },
  async created() {
    // await serve
    //   .post("/login", { phone: 13450809860, password: 123 })
    //   // await axios.post('http://newshopapi.0melon0.cn/api/login', { phone: 13450809860, password: 123 })
    //   .then(async(res) => {
    //     // console.log(res.result.token);
    //     this.admintoken = res.result.token;
    // let token = JSON.stringify({ data: { token: this.admintoken } });
    // SET__LOCAL_ITEM("token", token);
    // token = JSON.parse(GET_LOCAL_ITEM("token"));
    await this.$store.dispatch("classifyGoods");
    this.navs = this.$store.state.cls;
    // console.log(111, this.products, this.navs);
    await this.$store.dispatch("city");
    //   });
    // console.log(token);
  },
  computed: {
    shopCartprice() {
      let Allprice = 0;
      this.checkId.forEach((el) => {
        Allprice += this.$store.state.shopcart
          .filter((item) => item.id == el)
          .map((item) => item.num * item.s_good.price)
          .reduce(function (x, y) {
            return x + y;
          }, 0);
      });
      return Allprice;
    },
    ...mapState({
      shopCart: (state) => state.shopcart,
      city: (state) => state.city,
      address: (state) => state.address,
    }),
  },
};
</script>
